<extend name="public@base5"/>
<block name="head">
    <include file="theme/functions"/>
    <style>
        html, body {
            overflow-x: hidden;
        }

        .form-control-widget-title {
            border: none;
            padding: 0;
            margin: 0;
            font-size: inherit;
            line-height: inherit;
            background: transparent;
        }

        .form-control-widget-title:focus {
            outline: none;
            background: #fff;
        }

        .widgets-group {
            min-height: 40px;
        }

        .widgets-group .ui-sortable-placeholder {
            background: #f9f9f9;
            visibility: visible !important;
        }

        .widgets-group .ui-sortable-handle {
            cursor: move;
        }

        .widgets-group .ui-sortable-placeholder.ui-sortable-placeholder-disabled {
            background: red;
        }
    </style>
</block>
<block name="main">
    <notempty name="has_file">
        <div class="wrap">
            <div class="position-relative">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active"
                           href="{:url('Theme/fileSetting',['file'=>$fileName,'theme'=>$theme,'tab'=>'widget'])}">
                            {:lang('Widget')}
                        </a>
                    </li>
                    <notempty name="file.more.vars">
                        <li class="nav-item">
                            <a class="nav-link"
                               href="{:url('Theme/fileSetting',['file'=>$fileName,'theme'=>$theme,'tab'=>'var'])}">
                                {:lang('SETTING')}
                            </a>
                        </li>
                    </notempty>
                    <notempty name="has_public_var">
                        <li class="nav-item">
                            <a class="nav-link"
                               href="{:url('Theme/fileSetting',['file'=>$fileName,'theme'=>$theme,'tab'=>'public_var'])}">
                                {:lang('Global Settings')}
                            </a>
                        </li>
                    </notempty>
                </ul>
            </div>

            <form method="post" class="js-ajax-form  margin-top-20" action="admin/theme/{$theme}/file/setting">

                <div class="card">
                    <div class="list-group list-group-flush">
                        <a href="javascript:parent.openIframeLayer('{:url('admin/Nav/index')}','{:lang('ADMIN_NAV_INDEX')}')"
                           class="list-group-item list-group-item-action">{:lang('ADMIN_NAV_INDEX')}</a>
                        <a href="javascript:parent.openIframeLayer('{:url('admin/Slide/index')}','{:lang('ADMIN_SLIDE_INDEX')}')"
                           class="list-group-item list-group-item-action">{:lang('ADMIN_SLIDE_INDEX')}</a>
                        <a href="javascript:parent.openIframeLayer('{:url('admin/Link/index')}','{:lang('ADMIN_LINK_INDEX')}')"
                           class="list-group-item list-group-item-action">{:lang('ADMIN_LINK_INDEX')}</a>
                    </div>
                </div>

                <notempty name="file['more']['widgets_blocks']">
                    <foreach name="file['more']['widgets_blocks']" item="widgetsBlock" key="widgetsBlockName"
                             index="index">
                        <div class="card margin-top-20">
                            <div class="d-flex card-header justify-content-between align-items-center">
                                <div>
                                    <empty name="$widgetsBlock.title">
                                        {:lang('Untitled')}
                                        <else/>
                                        {:lang($widgetsBlock.title)}
                                    </empty>
                                </div>
                                <div>
                                    <a href="javascript:"
                                       onclick="_openThemeFileWidgets(this)"
                                       data-title="添加组件"
                                       title="添加组件"
                                       data-toggle="tooltip"
                                       data-file_id="{$file.id}"
                                       data-block_name="{$widgetsBlockName}"
                                       data-theme="{$theme}"
                                       class="btn btn-sm btn-light">+</a>
                                </div>
                            </div>
                            <ul class="list-group list-group-flush widgets-group"
                                data-file_id="{$file.id}"
                                data-block_name="{$widgetsBlockName}"
                                data-admin_content_lang="{:cmf_current_home_lang()}">
                                <notempty name="widgetsBlock.widgets">
                                    <foreach name="widgetsBlock.widgets" item="widget">
                                        <li class="list-group-item list-group-item-action widgets-group-item"
                                            data-file_id="{$file.id}"
                                            data-id="{$key}"
                                            data-title="{:lang('SETTING')}">
                                            {$widget.title|default=''}
                                            <a class="float-end btn btn-sm btn-danger js-ajax-delete"
                                               title="删除组件"
                                               data-toggle="tooltip"
                                               data-href="admin/theme/file/block/widget?file={$file.id}&theme={$theme}&block_name={$widgetsBlockName}&widget_id={$key}"
                                               href="javascript:"><i class="fa fa-trash-o"></i></a>
                                            <a class="float-end btn btn-sm btn-light me-1"
                                               onclick="doWidgetSetting(this)"
                                               title="设置组件"
                                               data-toggle="tooltip"
                                               href="javascript:"><i class="fa fa-cog"></i></a>
                                            <empty name="widget.display">
                                                <div class="float-end btn btn-sm btn-light me-1"
                                                     title="隐藏"
                                                     data-toggle="tooltip">
                                                    <i class="fa fa-eye-slash "></i>
                                                </div>
                                            </empty>
                                            <notempty name="widget.public_widget_id">
                                                <a class="float-end btn btn-sm btn-success me-1"
                                                   title="全局组件"
                                                   data-toggle="tooltip"
                                                   href="javascript:"><i class="fa fa-dot-circle-o fa-fw"></i></a>
                                            </notempty>
                                        </li>
                                    </foreach>
                                    <else/>
                                    <!--                                    <li class="list-group-item">什么都没有~</li>-->
                                </notempty>
                            </ul>
                        </div>
                    </foreach>
                </notempty>

                <notempty name="has_widget">
                    <foreach name="files" item="file">
                        <notempty name="file['more']['widgets']">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <foreach name="file['more']['widgets']" item="widget" key="widgetName" index="index">
                                    <div class="card margin-top-20">
                                        <div class="card-header">
                                            <!--<a role="button" data-toggle="collapse" data-parent="#accordion"-->
                                            <!--href="#collapse-{$widgetName}">-->
                                            <!--{$widget.title}-->
                                            <!--</a>-->
                                            <input class="form-control-widget-title" type="text" value="{$widget.title}"
                                                   name="files[{$file.id}][widget][{$widgetName}][title]">
                                            <label class="checkbox-inline float-end">
                                                <php>$display_checked=empty($widget['display'])?'':'checked';</php>
                                                <input type="checkbox"
                                                       name="files[{$file.id}][widget][{$widgetName}][display]"
                                                       value="1"
                                                       {$display_checked}>
                                                {:lang('Display')}
                                            </label>
                                        </div>
                                        <div class="card-body">
                                            {:_parse_vars($widget.vars,'files['.$file['id'].'][widget_vars]['.$widgetName.']',1,$widgetName,$file['id'])}
                                            <notempty name="file.is_public">
                                                <span class="pull-right badge text-bg-success">{:lang('Public widget')}</span>
                                                <!--<a class="pull-right" title="公共组件" data-toggle="tooltip"><i class="fa fa-question-circle"></i></a>-->
                                            </notempty>
                                        </div>
                                    </div>
                                </foreach>
                            </div>
                            <else/>
                        </notempty>
                    </foreach>
                    <else/>
                </notempty>
                <div class="form-group text-center" style="display: none;">
                    <input type="hidden" name="admin_content_lang" value="{:cmf_current_home_lang()}"/>
                    <input type="hidden" name="id" value="{$file.id|default=''}">
                    <button type="submit" class="btn btn-primary js-ajax-submit" id="submit-btn"
                            data-success="successCallback">
                        <i class="fa fa-save fa-fw"></i> {:lang('SAVE')}
                    </button>
                </div>

            </form>

        </div>

        <include file="theme/scripts"/>
        <script>
            parent.showDesignBtn();
        </script>
    </notempty>
    <empty name="has_file">
        <script>
            parent.hideDesignBtn();
        </script>
    </empty>
</block>
<block name="scripts">
    <script>
        function successCallback(data, statusText, xhr, $form) {
            function _refresh() {
                if (data.url) {
                    //返回带跳转地址
                    window.location.href = data.url;
                } else {
                    if (data.code == 1) {
                        //刷新当前页
                        reloadPage(window);
                    }
                }
            }

            noty({
                text: data.msg,
                type: 'success',
                layout: 'topCenter',
                modal: true,
                // animation: {
                //     open: 'animated bounceInDown', // Animate.css class names
                //     close: 'animated bounceOutUp', // Animate.css class names
                // },
                timeout: 800,
                callback: {
                    afterClose: function () {
                        if (parent.afterSaveSetting) {
                            parent.afterSaveSetting();
                        }
                        _refresh();
                    }
                }
            });
        }
    </script>
</block>
